<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
<#assign base=request.contextPath  />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${base}/frame/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${base}/css/demo.css" type="text/css">
    <script src="${base}/js/jquery.min.js"></script>
    <script type="text/javascript" src="${base}/js/zhang.js"></script>
    <style type="text/css">
        form {
            padding: 20px;
        }

        .layui-btn-radius {
            border-radius: 5px;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>发货管理</legend>
</fieldset>
<div class="layui-form-item">
    <label class="layui-form-label">昵称</label>
    <div class="layui-input-block">
        <input type="text" name="title" id="nickName" lay-verify="title" autocomplete="off" placeholder="请输入内容" class="layui-input">
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">卡号</label>
    <div class="layui-input-block">
        <input type="text" name="title" id="carNum" lay-verify="title" autocomplete="off" placeholder="请输入内容" class="layui-input">
    </div>
</div>
<button  id="btn1" style="float: left;margin-left: 100px" class="layui-btn layui-btn-normal">
    <i class="layui-icon layui-icon-search">搜索</i>

</button>
<div class="demoTable" style="padding:15px;">
<#--  <button class="layui-btn layui-btn-radius" id="btn2" data-method="offset" type="button"
          style="background-color: #0092EF;">添加角色
  </button>-->
    <div style="float:right;">
    <#--         <div class="layui-inline">
                   <input class="layui-input" name="id" id="demoReload" autocomplete="off">
             </div>-->
    <#-- <button class="layui-btn layui-btn-radius" id="btn1" data-type="reload" style="background-color: #0092EF;">搜索</button>-->

    </div>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="barDemo">

    <i class="layui-icon layui-icon-delete layui-btn-xs" lay-event="del" href="javascript:void(0)"
       onclick="delectRole('{{d.id}}')" style="font-size: 20px;"></i>
</script>
<script src="${base}/frame/layui/layui.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate', 'table'], function () {
        var form = layui.form
                , $ = layui.jquery
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate
                , table = layui.table;
        table.render({
            elem: '#test'
            , url: '${base}/findList'//数据接口
            , cols: [[
                {
                    field: 'id', templet: function (val) {
                        return val.LAY_INDEX
                    }, align: 'center', title: '序号'
                }
                , {field: 'nickName', align: 'center', title: '昵称'}
                , {
                    field: 'image', align: 'center', templet: function (val) {
                        return " <img  style='height: 50px'src='" + val.image + "'> "
                    }, title: '头像'
                }
                , {field: 'allowance', align: 'center', title: '余量', edit: true,sort: true}

                , {field: 'cardNum', align: 'center', title: '卡号',sort: true}

            ]]
            , id: 'testReload'
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                , theme: '#0092EF'
                , limit: 20
            }, done: function (res, curr, count) {
                this.where = {};
            }
        });
        //实现搜索
        $('#btn1').on('click', function(){
            var nickName=$("#nickName").val();
            var cardNum=$("#carNum").val();
            var whereData={};
            whereData.nickName=nickName;
            whereData.cardNum=cardNum;

            var table = layui.table;
            //表刷新方法
            table.reload('testReload', {
                url:'${base}/findList'
                ,where: whereData //设定异步数据接口的额外参数
            });
        });
        //监听行单击事件
        table.on('row(test)', function (obj) {
            console.log(obj.tr) //得到当前行元素对象
            console.log(obj.data) //得到当前行数据

/*
            layer.open({
                title: '修改会员等级',
                type: 1,
                content:
                        '<form class="layui-form" action=""> ' +
                        '<select name="interest" lay-filter="aihao" id="selectList">' +
                        ' <option value=""selected="">请选择新的等级</option>' +
                        ' <option value="1">非会员非合伙人</option>' +
                        ' <option value="2" >会员</option>' +
                        ' <option value="3">合伙人</option>' +
                        ' </select>' +
                        '</form>    <button id="sub" onclick="" style="margin-top: 141px" class="layui-btn layui-btn-fluid">确定修改</button>',
                area: ['500px', '300px'],
                success: function (layero, index) {
                    $("#selectList").find("option[value=" + obj.data.vip + "]").prop("selected", true);
                    form.render();
                }
            });
            $("#sub").on("click", function () {
                editSub(2, obj.data.id)
            });*/
        });


        table.on('edit(test)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            /*console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据*/
            editSub(1, obj.data)
        });

        function editSub(flag, data) {
            if (flag === 1) {

            } else {
                if (data == null || data === "") {
                    layer.msg("参数错误", {icon: 5})
                    return;
                }
                if ($("#selectList").val() == null || $("#selectList").val() === "") {
                    layer.msg("请选择新的等级", {icon: 5})
                    return;
                }
                var param = {};
                param.id = data;
                param.vip = $("#selectList").val();
                data = param
            }
            $.ajax({
                type: "post",
                url: "${base}/editPPuser",
                data: data,
                success: function (data) {
                    if (data === false) {
                        layer.msg("修改失败", {icon: 5})
                    }
                    if (flag === 2) {
                        layer.closeAll('page');
                        table.reload('testReload', {
                            url: '/findList'
                        });
                    }
                }

            });
        }
    });


</script>
</body>
</html>